Shape Detection APIãæ¢ããããã³ããšã³ãã¢ããªã«ã³ã³ãã¥ãŒã¿ããžã§ã³æ©èœããããã匷åãªããŒã«ã§ãããã©ãŠã¶ã§çŽæ¥ãé¡ãããŒã³ãŒããããã¹ããæ€åºããæ¹æ³ãåŠã³ãŸãã
ããã³ããšã³ãShape Detection API: ãã©ãŠã¶ãžã®ã³ã³ãã¥ãŒã¿ããžã§ã³çµ±åã¬ã€ã
Webãã©ãŠã¶ã¯ãåãªãéçã³ã³ãã³ãã衚瀺ãã以äžã®åŒ·åãªãã©ãããã©ãŒã ãžãšé²åããŠããŸããJavaScriptãšãã©ãŠã¶APIã®é²æ©ã«ãããç§ãã¡ã¯ä»ãã¯ã©ã€ã¢ã³ããµã€ãã§çŽæ¥ãè€éãªã¿ã¹ã¯ãå®è¡ã§ããããã«ãªããŸããããã®ãããªé²æ©ã®äžã€ãShape Detection APIã§ããããã¯ãéçºè ãç»åãåç»å ã®é¡ãããŒã³ãŒããããã¹ããªã©ãããŸããŸãªåœ¢ç¶ãæ€åºã§ããããã«ãããã©ãŠã¶APIã§ããããã«ãããåºæ¬çãªã³ã³ãã¥ãŒã¿ããžã§ã³ã¿ã¹ã¯ããµãŒããŒãµã€ãã®åŠçã«é Œãããšãªããã€ã³ã¿ã©ã¯ãã£ãã§ã€ã³ããªãžã§ã³ããªWebã¢ããªã±ãŒã·ã§ã³ãäœæããå¯èœæ§ãåºãããŸãã
Shape Detection APIãšã¯ïŒ
Shape Detection APIã¯ããã©ãŠã¶å ã§çŽæ¥ã³ã³ãã¥ãŒã¿ããžã§ã³ã¢ã«ãŽãªãºã ã«ã¢ã¯ã»ã¹ããããã®æšæºåãããæ¹æ³ãæäŸããŸããäž»ã«3ã€ã®æ€åºåšãå ¬éããŠããŸãã
- FaceDetector: ç»åãåç»å ã®äººéã®é¡ãæ€åºããŸãã
- BarcodeDetector: ããŸããŸãªããŒã³ãŒã圢åŒãæ€åºã»ãã³ãŒãããŸãã
- TextDetector: ç»åå ã®ããã¹ãé åãæ€åºããŸãã(泚: ãŸã ãã©ãŠã¶éã§åºãå®è£ ãããŠããŸãã)
ãããã®æ€åºåšã¯ã¯ã©ã€ã¢ã³ãã®ããã€ã¹äžã§çŽæ¥åäœãããããç»åãåç»ããŒã¿ãåŠçã®ããã«ãµãŒããŒã«éä¿¡ããå¿ èŠããããŸãããããã«ã¯ã以äžã®ãããªè€æ°ã®å©ç¹ããããŸãã
- ãã©ã€ãã·ãŒ: æ©å¯ããŒã¿ã¯ãŠãŒã¶ãŒã®ããã€ã¹äžã«çãŸããŸãã
- ããã©ãŒãã³ã¹: ãµãŒããŒãžã®åŸåŸ©ããªããããé å»¶ãæžå°ããŸãã
- ãªãã©ã€ã³æ©èœ: äžéšã®å®è£ ã§ã¯ãªãã©ã€ã³ã§ã®æ€åºãå¯èœã§ãã
- ãµãŒããŒã³ã¹ãã®åæž: ããã¯ãšã³ãã€ã³ãã©ã¹ãã©ã¯ãã£ãžã®åŠçè² è·ã軜æžãããŸãã
ãã©ãŠã¶ã®ãµããŒãç¶æ³
Shape Detection APIã®ãã©ãŠã¶ãµããŒãã¯ãŸã é²åã®éäžã§ããChromeãEdgeã®ãããªäžéšã®ã¢ãã³ãã©ãŠã¶ã§ã¯APIãå©çšå¯èœã§ãããFirefoxãSafariãªã©ä»ã®ãã©ãŠã¶ã§ã¯ãµããŒããéå®çã§ãã£ãããå®éšçãªæ©èœãæå¹ã«ããå¿ èŠããã£ããããŸããæ¬çªç°å¢ã§APIã«äŸåããåã«ã¯ãå¿ ãææ°ã®ãã©ãŠã¶äºææ§ããŒãã«ã確èªããŠãã ããããŠã§ããµã€ãcaniuse.comãªã©ãå©çšããŠãåæ©èœã®çŸåšã®ãµããŒãç¶æ³ã確èªã§ããŸãã
FaceDetector APIã®äœ¿çš
ãŸããFaceDetector APIã䜿çšããŠç»åå
ã®é¡ãæ€åºããå®è·µçãªäŸããå§ããŸãããã
åºæ¬çãªé¡æ€åº
以äžã¯ãFaceDetectorã䜿çšããæ¹æ³ã瀺ãåºæ¬çãªã³ãŒãã¹ããããã§ãã
const faceDetector = new FaceDetector();
const image = document.getElementById('myImage'); // Assume this is an <img> element
faceDetector.detect(image)
.then(faces => {
faces.forEach(face => {
console.log('Face detected at:', face.boundingBox);
// You can draw a rectangle around the face using canvas
});
})
.catch(error => {
console.error('Face detection failed:', error);
});
説æ:
FaceDetectorã¯ã©ã¹ã®æ°ããã€ã³ã¹ã¿ã³ã¹ãäœæããŸãã- HTMLå
ã®ç»åèŠçŽ (
<img>)ãžã®åç §ãååŸããŸãã FaceDetectorã®detect()ã¡ãœãããåŒã³åºããç»åèŠçŽ ãæž¡ããŸããdetect()ã¡ãœããã¯ãæ€åºãããåé¡ã衚ãFaceãªããžã§ã¯ãã®é åã§è§£æ±ºãããPromiseãè¿ããŸããFaceãªããžã§ã¯ãã®é åãå埩åŠçããåé¡ã®ããŠã³ãã£ã³ã°ããã¯ã¹ãã³ã³ãœãŒã«ã«èšé²ããŸããboundingBoxããããã£ã«ã¯ãé¡ãå²ãç©åœ¢ã®åº§æšãå«ãŸããŠããŸãã- ãŸããæ€åºããã»ã¹äžã«çºçããå¯èœæ§ã®ãããšã©ãŒãåŠçããããã®
catch()ãããã¯ãå«ãŸããŠããŸãã
顿€åºãªãã·ã§ã³ã®ã«ã¹ã¿ãã€ãº
FaceDetectorã³ã³ã¹ãã©ã¯ã¿ã¯ãèšå®ãªãã·ã§ã³ãæã€ãªãã·ã§ã³ã®ãªããžã§ã¯ããåãå
¥ããŸãã
maxDetectedFaces: æ€åºããé¡ã®æå€§æ°ãããã©ã«ãã¯1ã§ããfastMode: ããé«éã§ããã粟床ãäœããªãå¯èœæ§ã®ããæ€åºã¢ãŒãã䜿çšãããã©ããã瀺ãããŒã«å€ãããã©ã«ãã¯falseã§ãã
äŸ:
const faceDetector = new FaceDetector({ maxDetectedFaces: 5, fastMode: true });
æ€åºãããé¡ã®åšãã«ç©åœ¢ãæç»ãã
æ€åºãããé¡ãèŠèŠçã«åŒ·èª¿è¡šç€ºããã«ã¯ãHTML5 Canvas APIã䜿çšããŠãã®åšãã«ç©åœ¢ãæç»ã§ããŸããæ¹æ³ã¯æ¬¡ã®ãšããã§ãã
const canvas = document.getElementById('myCanvas');
const context = canvas.getContext('2d');
const image = document.getElementById('myImage');
faceDetector.detect(image)
.then(faces => {
faces.forEach(face => {
const { x, y, width, height } = face.boundingBox;
context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 2;
context.strokeStyle = 'red';
context.stroke();
});
})
.catch(error => {
console.error('Face detection failed:', error);
});
éèŠ: canvasèŠçŽ ãç»åèŠçŽ ã®äžã«æ£ããé 眮ãããŠããããšã確èªããŠãã ããã
BarcodeDetector APIã®äœ¿çš
BarcodeDetector APIã䜿çšãããšãç»åãåç»å
ã®ããŒã³ãŒããæ€åºããã³ãã³ãŒãã§ããŸããæ¬¡ã®ãããªå¹
åºãããŒã³ãŒã圢åŒããµããŒãããŠããŸãã
- EAN-13
- EAN-8
- UPC-A
- UPC-E
- Code 128
- Code 39
- Code 93
- Codabar
- ITF
- QR Code
- Data Matrix
- Aztec
- PDF417
åºæ¬çãªããŒã³ãŒãæ€åº
以äžã¯BarcodeDetectorã®äœ¿ç𿹿³ã§ãã
const barcodeDetector = new BarcodeDetector();
const image = document.getElementById('myBarcodeImage');
barcodeDetector.detect(image)
.then(barcodes => {
barcodes.forEach(barcode => {
console.log('Barcode detected:', barcode.rawValue);
console.log('Barcode format:', barcode.format);
console.log('Bounding Box:', barcode.boundingBox);
});
})
.catch(error => {
console.error('Barcode detection failed:', error);
});
説æ:
BarcodeDetectorã¯ã©ã¹ã®æ°ããã€ã³ã¹ã¿ã³ã¹ãäœæããŸãã- ããŒã³ãŒããå«ãç»åèŠçŽ ãžã®åç §ãååŸããŸãã
detect()ã¡ãœãããåŒã³åºããç»åèŠçŽ ãæž¡ããŸããdetect()ã¡ãœããã¯ãDetectedBarcodeãªããžã§ã¯ãã®é åã§è§£æ±ºãããPromiseãè¿ããŸãã- å
DetectedBarcodeãªããžã§ã¯ãã«ã¯ãæ€åºãããããŒã³ãŒãã«é¢ããæ å ±ãå«ãŸããŠããŸããããã«ã¯ä»¥äžãå«ãŸããŸãã rawValue: ãã³ãŒããããããŒã³ãŒãã®å€ãformat: ããŒã³ãŒãã®åœ¢åŒïŒäŸ: 'qr_code', 'ean_13'ïŒãboundingBox: ããŒã³ãŒãã®ããŠã³ãã£ã³ã°ããã¯ã¹ã®åº§æšã- ãã®æ å ±ãã³ã³ãœãŒã«ã«èšé²ããŸãã
- ãšã©ãŒãã³ããªã³ã°ãå«ãŸããŠããŸãã
ããŒã³ãŒãæ€åºåœ¢åŒã®ã«ã¹ã¿ãã€ãº
æ€åºãããããŒã³ãŒã圢åŒãæå®ããã«ã¯ãBarcodeDetectorã³ã³ã¹ãã©ã¯ã¿ã«åœ¢åŒãã³ãã®ãªãã·ã§ã³é
åãæž¡ããŸãã
const barcodeDetector = new BarcodeDetector({ formats: ['qr_code', 'ean_13'] });
ããã«ãããæ€åºãQRã³ãŒããšEAN-13ããŒã³ãŒãã«éå®ãããããã©ãŒãã³ã¹ãåäžããå¯èœæ§ããããŸãã
TextDetector APIã®äœ¿çš (å®éšç)
TextDetector APIã¯ãç»åå
ã®ããã¹ãé åãæ€åºããããã«èšèšãããŠããŸãããã ãããã®APIã¯ãŸã å®éšçã§ããããã¹ãŠã®ãã©ãŠã¶ã§å®è£
ãããŠããããã§ã¯ãªãããšã«æ³šæããããšãéèŠã§ãããã®å¯çšæ§ãšåäœã¯äžè²«æ§ããªãå ŽåããããŸãã䜿çšã詊ã¿ãåã«ããã©ãŠã¶ã®äºææ§ãæ³šææ·±ã確èªããŠãã ããã
åºæ¬çãªããã¹ãæ€åº (å©çšå¯èœãªå Žå)
以äžã¯TextDetectorã䜿çšããå¯èœæ§ã®ããäŸã§ãããåäœããªãå¯èœæ§ãããããšãå¿ããªãã§ãã ããã
const textDetector = new TextDetector();
const image = document.getElementById('myTextImage');
textDetector.detect(image)
.then(texts => {
texts.forEach(text => {
console.log('Text detected:', text.rawValue);
console.log('Bounding Box:', text.boundingBox);
});
})
.catch(error => {
console.error('Text detection failed:', error);
});
ããTextDetectorãå©çšå¯èœã§æ€åºãæåããå Žåãtextsé
åã«ã¯DetectedTextãªããžã§ã¯ããå«ãŸããããããã«rawValueïŒæ€åºãããããã¹ãïŒãšboundingBoxãå«ãŸããŸãã
èæ ®äºé ãšãã¹ããã©ã¯ãã£ã¹
- ããã©ãŒãã³ã¹: ã¯ã©ã€ã¢ã³ããµã€ãåŠçã¯äžéšã®ã±ãŒã¹ã§ããã©ãŒãã³ã¹äžã®å©ç¹ãæäŸããŸãããè€éãªç»åè§£æã¯äŸç¶ãšããŠãªãœãŒã¹ã倧éã«æ¶è²»ããå¯èœæ§ããããŸããWebé
ä¿¡ã®ããã«ç»åãåç»ãæé©åããåŠçæéãæå°éã«æããŸããããããé«éãªïŒãã ã粟床ãäœããªãå¯èœæ§ãããïŒæ€åºã®ããã«ã
FaceDetectorã®fastModeãªãã·ã§ã³ã®äœ¿çšãæ€èšããŠãã ããã - ãã©ã€ãã·ãŒ: ãŠãŒã¶ãŒã«å¯ŸããŠã¯ã©ã€ã¢ã³ããµã€ãåŠçã®ãã©ã€ãã·ãŒäžã®å©ç¹ã匷調ããŸããããAPIãã©ã®ããã«äœ¿çšããŠãããããããŠåœŒãã®ããŒã¿ãã©ã®ããã«æ±ãããŠãããïŒãŸãã¯ãã®å Žåã¯æ±ãããŠããªããïŒã«ã€ããŠéææ§ãä¿ã¡ãŸãããã
- ãšã©ãŒãã³ããªã³ã°: APIããµããŒããããŠããªãããŸãã¯æ€åºã倱æããå Žåã«é©åã«å¯ŸåŠããããã«ãåžžã«å ç¢ãªãšã©ãŒãã³ããªã³ã°ãå®è£ ããŠãã ããããŠãŒã¶ãŒã«æçãªãšã©ãŒã¡ãã»ãŒãžãæäŸããŸãããã
- æ©èœæ€åº: Shape Detection APIã䜿çšããåã«ããŠãŒã¶ãŒã®ãã©ãŠã¶ã§ãµããŒããããŠãããã©ããã確èªããŸãã
if ('FaceDetector' in window) {
// FaceDetector is supported
} else {
console.warn('FaceDetector is not supported in this browser.');
// Provide an alternative implementation or disable the feature
}
- ã¢ã¯ã»ã·ããªãã£: Shape Detection APIã䜿çšããããšã«ããã¢ã¯ã»ã·ããªãã£ãžã®åœ±é¿ãèæ ®ããŠãã ãããããšãã°ã顿€åºã䜿çšããŠç¹å®ã®æ©èœãæå¹ã«ããå Žåãæ€åºã§ããªããŠãŒã¶ãŒããããã®æ©èœã«ã¢ã¯ã»ã¹ã§ããä»£æ¿æ¹æ³ãæäŸããŠãã ããã
- å«ççèæ ®äºé : 顿€åºããã®ä»ã®ã³ã³ãã¥ãŒã¿ããžã§ã³æè¡ã䜿çšããéã®å«çç圱é¿ã«æ³šæããŠãã ããããããã®æè¡ãå·®å¥çãŸãã¯æå®³ãªæ¹æ³ã§äœ¿çšããããšã¯é¿ããŠãã ãããããšãã°ãç¹å®ã®äººå£çµ±èšã°ã«ãŒãã«å¯ŸããŠäžæ£ç¢ºãŸãã¯äžå ¬å¹³ãªçµæãããããå¯èœæ§ã®ãã顿€åºã¢ã«ãŽãªãºã ã®æœåšçãªãã€ã¢ã¹ã«æ³šæããŠãã ããããããã®ãã€ã¢ã¹ã軜æžããããã«ç©æ¥µçã«åãçµã¿ãŸãããã
ãŠãŒã¹ã±ãŒã¹ãšäŸ
Shape Detection APIã¯ãWebã¢ããªã±ãŒã·ã§ã³éçºã«å¹ åºããšããµã€ãã£ã³ã°ãªå¯èœæ§ããããããŸãã以äžã«ããã€ãã®äŸãæããŸãã
- ç»åã»åç»ç·šé: ç»åãåç»å ã®é¡ãèªåçã«æ€åºãããã£ã«ã¿ãŒããšãã§ã¯ãããŸãã¯å¢šæ¶ããé©çšããŸãã
- æ¡åŒµçŸå® (AR): 顿€åºã䜿çšããŠããªã¢ã«ã¿ã€ã ã§ãŠãŒã¶ãŒã®é¡ã«ä»®æ³ãªããžã§ã¯ããéãåãããŸãã
- ã¢ã¯ã»ã·ããªãã£: èŠèŠé害ã®ãããŠãŒã¶ãŒãç»åå ã®ãªããžã§ã¯ããèªåçã«æ€åºããŠèª¬æããããšã§æ¯æŽããŸããããšãã°ããŠã§ããµã€ãã¯é¡æ€åºã䜿çšããŠããŠã§ãã«ã¡ã©ã®ã¹ããªãŒã ã«äººãããããšãã¢ããŠã³ã¹ã§ããŸãã
- ã»ãã¥ãªãã£: å®å šãªèªèšŒãããŒã¿å ¥åã®ããã«ã¯ã©ã€ã¢ã³ããµã€ãã®ããŒã³ãŒãã¹ãã£ã³ãå®è£ ããŸããããã¯ç¹ã«ã¢ãã€ã«Webã¢ããªã±ãŒã·ã§ã³ã§åœ¹ç«ã¡ãŸãã
- ã€ã³ã¿ã©ã¯ãã£ãã²ãŒã : ãŠãŒã¶ãŒã®è¡šæ ãåãã«åå¿ããã²ãŒã ãäœæããŸãããŸã°ãããç¬é¡ã§ãã£ã©ã¯ã¿ãŒãæäœããã²ãŒã ãæ³åããŠã¿ãŠãã ããã
- ããã¥ã¡ã³ãã¹ãã£ã³: OCRïŒå
åŠæåèªèïŒåŠçã®ããã«ãã¹ãã£ã³ãããããã¥ã¡ã³ãå
ã®ããã¹ãé åãèªåçã«æ€åºããŸãã
TextDetectorèªäœã¯OCRãå®è¡ããªããããããŸãããããããªãåŠçã®ããã«ããã¹ãé åãç¹å®ããã®ã«åœ¹ç«ã¡ãŸãã - Eã³ããŒã¹: ãŠãŒã¶ãŒãå®åºèã§è£œåã®ããŒã³ãŒããã¹ãã£ã³ããŠãEã³ããŒã¹ãµã€ãã§çŽ æ©ãèŠã€ããããããã«ããŸããããšãã°ããŠãŒã¶ãŒã¯å³æžé€šã§æ¬ã®ããŒã³ãŒããã¹ãã£ã³ããŠããªã³ã©ã€ã³ã§è²©å£²ãããŠããã®ãèŠã€ããããšãã§ããŸãã
- æè²: 顿€åºã䜿çšããŠåŠçã®ãšã³ã²ãŒãžã¡ã³ããæž¬å®ããããã«å¿ããŠåŠç¿äœéšã調æŽããã€ã³ã¿ã©ã¯ãã£ããªåŠç¿ããŒã«ãããšãã°ãå®¶åºæåž«ããã°ã©ã ã¯ãåŠçãæ··ä¹±ããŠãããäžæºãæããŠãããã倿ããããã«åŠçã®è¡šæ ãç£èŠããé©åãªæ¯æŽãæäŸã§ããŸãã
ã°ããŒãã«ãªäŸ: ã°ããŒãã«ãªEã³ããŒã¹äŒæ¥ã¯ãã¢ãã€ã«ãŠã§ããµã€ãã«ããŒã³ãŒãã¹ãã£ã³ãçµ±åããããŸããŸãªåœã®é¡§å®¢ãçŸå°ã®èšèªã補åã®åœåèŠåã«é¢ä¿ãªããè¿ éã«è£œåãèŠã€ããããããã«ããããšãã§ããŸããããŒã³ãŒãã¯ãŠãããŒãµã«ãªèå¥åãæäŸããŸãã
Shape Detection APIã®ä»£æ¿ææ®µ
Shape Detection APIã¯ãã©ãŠã¶ã§ã³ã³ãã¥ãŒã¿ããžã§ã³ã¿ã¹ã¯ãå®è¡ãã䟿å©ãªæ¹æ³ãæäŸããŸãããèæ ®ãã¹ã代æ¿ã¢ãããŒãããããŸãã
- ãµãŒããŒãµã€ãåŠç: OpenCVãTensorFlowã®ãããªå°çšã®ã³ã³ãã¥ãŒã¿ããžã§ã³ã©ã€ãã©ãªããã¬ãŒã ã¯ãŒã¯ã䜿çšããŠãåŠçã®ããã«ç»åãåç»ããµãŒããŒã«éä¿¡ã§ããŸãããã®ã¢ãããŒãã¯ããé«ãæè»æ§ãšå¶åŸ¡ãæäŸããŸãããããå€ãã®ã€ã³ãã©ãå¿ èŠãšããé å»¶ãçºçããŸãã
- WebAssembly (Wasm): C++ãªã©ã®èšèªã§æžãããã³ã³ãã¥ãŒã¿ããžã§ã³ã©ã€ãã©ãªãWebAssemblyã«ã³ã³ãã€ã«ãããã©ãŠã¶ã§å®è¡ã§ããŸãããã®ã¢ãããŒãã¯ãã€ãã£ãã«è¿ãããã©ãŒãã³ã¹ãæäŸããŸãããããæè¡çãªå°éç¥èãå¿ èŠãšããã¢ããªã±ãŒã·ã§ã³ã®åæããŠã³ããŒããµã€ãºãå¢å ããå¯èœæ§ããããŸãã
- JavaScriptã©ã€ãã©ãª: tracking.jsãface-api.jsãªã©ãããã€ãã®JavaScriptã©ã€ãã©ãªãã³ã³ãã¥ãŒã¿ããžã§ã³æ©èœãæäŸããŠããŸãããããã®ã©ã€ãã©ãªã¯WebAssemblyããã䜿ããããå ŽåããããŸãããããã©ãŒãã³ã¹ã¯å£ãå¯èœæ§ããããŸãã
çµè«
ããã³ããšã³ãShape Detection APIã¯ãWebã¢ããªã±ãŒã·ã§ã³ã«ã³ã³ãã¥ãŒã¿ããžã§ã³æ©èœããããã匷åãªããŒã«ã§ããã¯ã©ã€ã¢ã³ããµã€ãåŠçãæŽ»çšããããšã§ãããã©ãŒãã³ã¹ãåäžããããŠãŒã¶ãŒã®ãã©ã€ãã·ãŒãä¿è·ãããµãŒããŒã³ã¹ããåæžã§ããŸãããã©ãŠã¶ã®ãµããŒãã¯ãŸã é²åã®éäžã§ããããã®APIã¯ãè€éãªã¿ã¹ã¯ããã©ãŠã¶ã§çŽæ¥å®è¡ã§ããWebéçºã®æªæ¥ãå£éèŠããŠãããŸãããã©ãŠã¶ã®ãµããŒããåäžããAPIãæçããã«ã€ããŠããã®æè¡ã®ããã«é©æ°çã§ãšããµã€ãã£ã³ã°ãªã¢ããªã±ãŒã·ã§ã³ãç»å ŽããããšãæåŸ ãããŸããAPIã詊ããŠã¿ãŠããã®å¯èœæ§ãæ¢ããWebã®æªæ¥ã圢äœãããã«ãã®é²åã«è²¢ç®ããŠãã ããã
ã³ã³ãã¥ãŒã¿ããžã§ã³æè¡ãæ±ãéã¯ãåžžã«å«ççé æ ®ãšãŠãŒã¶ãŒã®ãã©ã€ãã·ãŒãæåªå ããããšãå¿ããªãã§ãã ããã